<template>
    <div>
        <el-page-header :icon="ArrowLeft">
            <template #title @click="back">
                <span @click="back">返回</span>
            </template>
            <template #content>
                <span class="fs-14"> 保单管理 </span>
                <el-icon style="vertical-align: -3px;">
                    <Right />
                </el-icon>

                <span class="fs-14 cr-blue"> 历史保单查询 </span>
            </template>
        </el-page-header>

        <!-- 查询表单 -->
        <el-form :inline="true" :model="formInline" class="mt-12  pad-12">
            <el-form-item label="保单号：" class="mb-0" size="large">
                <el-input v-model="formInline.user" placeholder="请输入保单号查询" />
            </el-form-item>
            <el-form-item class="mb-0">
                <el-button type="primary" @click="onSubmit" size="large">查询</el-button>
            </el-form-item>
        </el-form>


        <!-- 保单表格 -->
        <el-table :data="tableData" border style="width: 100%" class="mt-12">
            <el-table-column prop="datetime" label="时间" width="150" />
            <el-table-column prop="policy" label="保单号" />
            <el-table-column prop="insurant" label="投保人" width="100" />
            <el-table-column prop="card" label="投保人生份证号" />
            <el-table-column prop="insured" label="被投保人" width="100" />
            <el-table-column prop="clinic" label="就诊诊所" />
            <el-table-column prop="state" label="状态"/>

        </el-table>

        <!-- 分页器 -->
        <div class="float-r mt-12">
            <el-pagination layout="prev, pager, next" :total="100" />
        </div>

    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { ArrowLeft, Right, Plus, InfoFilled, ArrowRight } from '@element-plus/icons-vue'

import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
// 导入接口
import { policy} from '../api';

import { useNavigate } from '../hooks'

const value1 = ref('')


const formInline = reactive({
    user: '',
})


interface BillInfo {
    datetime: string;
    policy: number;
    insurant: string;
    card: string;
    insured: string;
    clinic: string;
    state:string;
}


const navigator = useNavigate()
const navigateTo = (url: string) => {
    navigator.navigateTo(url)
}
const back = function () {
    navigator.back()
}

const tableData = ref()


// 在生命周期中请求接口，获得数据，展示表格
onMounted(async () => {
    const res = await policy({})
    tableData.value = res;

})






</script>
  
<style scoped lang="scss">
.tf {
    padding: 0 20px;

    span {
        flex: 1;
    }
}

.df {
    margin-top: 30px;
    width: 100%;

    span {
        flex: 3;
    }

    p {
        color: #000;
        flex: 1;
    }

    .f-0 {
        flex: none;
    }
}
</style>